const addButton = document.getElementById("addButton");
const minusButton = document.getElementById("minusButton");
const state = document.getElementById("state");

const addClick = Rx.Observable.fromEvent(addButton, "click").mapTo(1);
const minusClick = Rx.Observable.fromEvent(minusButton, "click").mapTo(-1);
/* 
  使用所学操作符实现一个简易的加减计数器 
  重点注意： 每次 Operator 被调用后， 它会返回一个新的 Observable
*/
const numberState = Rx.Observable.empty()
    .startWith(0) // 开始前塞入一个0，
	/* 
		marge: 把加事件和减事件合并和numberState.startWith(0)合并
		注意： marge不会影响每个Observable的执行时机
	*/
    .merge(addClick, minusClick) 
    /* 
    	scan: 计算初始值，并且在 Observable 每次调用next方法时计算新的值
		注意此时调用时机：触发点击事件时调用
  	*/
    .scan((origin, next) => {
        console.log(origin, next);
        return origin + next;
    }, 0);

numberState.subscribe({
    next: (value) => {
        state.innerHTML = value; //使用最新的值渲染页面
    },
    error: (err) => {
        console.log("Error: " + err);
    },
    complete: () => {
        console.log("complete");
    },
});
